<template>
  <div class="mine">
    <div class="top" v-if="!iswait">
      <div class="img">
        <img src="../../assets/logo.png" alt="" />
      </div>
      <div class="user">
        <span>{{user.userList.nickname}}</span>
      </div>
      <div class="exit">
        <span @click = 'toExit'>退出登录</span>
      </div>
    </div>
    <div class="order mybox" v-if="!iswait">
      <div class="o-top">
        <div class="myorder">我的订单</div>
        <router-link to="/personal/order"
          ><div>全部订单<span class="bi bi-chevron-compact-right"></span></div
        ></router-link>
      </div>
      <div class="o-list">
        <div class="l-item">
          <router-link to="/personal/order">
            <span class="num">1</span>
            <span class="iconfont icon-31daifukuan"></span>
            <span class="text">待付款</span>
          </router-link>
        </div>
        <div class="l-item">
          <router-link to="/personal/order">
            <span class="num">1</span>
            <span class="iconfont icon-daifahuo"></span>
            <span class="text">待发货</span>
          </router-link>
        </div>
        <div class="l-item">
          <router-link to="/personal/order">
            <span class="num">1</span>
            <span class="iconfont icon-daishouhuo"></span>
            <span class="text">待收货</span>
          </router-link>
        </div>
        <div class="l-item">
          <router-link to="/personal/order">
            <span class="num">1</span>
            <span class="iconfont icon-daipingjia"></span>
            <span class="text">待评价</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="serve mybox" v-if="!iswait">
      <div class="o-top">
        <div class="myorder">我的服务</div>
      </div>
      <div class="o-list">
        <div class="l-item">
          <router-link to="/home/4">
            <!-- <span class="num">1</span> -->
            <span class="iconfont icon-shoucang"></span>
            <span class="text">收藏</span>
          </router-link>
        </div>
        <div class="l-item">
          <!-- <span class="num">1</span> -->
          <router-link to="/history">
            <span class="iconfont icon-zuji"></span>
            <span class="text">足迹</span>
          </router-link>
        </div>
      </div>
    </div>
    <wait v-if="iswait"></wait>
    <router-view></router-view>
  </div>
</template>
<script>
import { mapState } from "vuex"
import wait from "@/components/wait"
export default {
  data() {
    return {
        iswait : true,
    };
  },
  methods: {
    init() {
        let token = localStorage.getItem('token_user');
      axios({
        method: "GET",
        url: `http://47.115.51.185/api/userinfo`,
        headers: {
            "Accept": "application/json, text/plain, */*",
            "Authori-zation": "Bearer " + token,
        },
      }).then((data) => {
        //   console.log(data.data);
          if(data.data.status != 410000){
            this.$store.dispatch("user/setuserAsync", data.data.data);
            this.iswait = false;
          }else{
            localStorage.removeItem('token_user');
            window.location.href = '#/login';
          }
      });
    },
    toExit(){
        localStorage.removeItem('token_user');
        window.location.href = '#/login';
    }
  },
  computed:{
     ...mapState(['user'])
  },
  components:{
      wait,
  },
  created() {
    if(localStorage.getItem('token_user')){
      this.init();
    }
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
@import "../../assets/font/font_icon3/iconfont.css";
.mine {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: #f5f5f5;
  .top {
    width: 100%;
    height: 140px;
    background: @color4;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    color: white;
    justify-content: space-between;
    .img {
      width: 60px;
      height: 60px;
      background: #f5f5f5;
      border-radius: 50%;
      position: relative;
      margin-right: 30px;
      img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
    .user {
      font-size: 20px;
      line-height: 60px;
    }
    .exit {
      font-size: 14px;
      line-height: 60px;
      margin-left: 30px;
      color: #f5f5f5;
    }
  }
  .mybox {
    width: 95%;
    background: white;
    border-radius: 10px;
    font-size: 18px;
    .o-top {
      padding: 10px;
      border-bottom: 1px dashed #ccc;
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
    }
    .o-list {
      padding: 10px;
      display: flex;
      .l-item {
        flex-basis: 25%;
        text-align: center;
        position: relative;
        .iconfont {
          margin-top: 10px;
          display: block;
          font-size: 30px;
          color: @color4;
        }
        .text {
          font-size: 16px;
        }
        .num {
          position: absolute;
          font-size: 12px;
          display: inline-block;
          border: 1px solid @color4;
          background: white;
          border-radius: 10px;
          min-width: 15px;
          color: @color4;
        }
      }
    }
  }
  .order {
    margin: -40px auto;
  }
  .serve {
    margin: 50px auto;
  }
}
</style>